<template>
  <div class="user-container">
    <div class="user-body">
      <!-- 用户信息展示区start -->
      <div class="userInfo-wrap">
        <!-- 头像区 -->
        <div class="avatar-wrap">
          <van-image
            v-if="this.user.avatar != null"
            class="avatar-image"
            round
            :src="this.user.avatar"
            cover
          />
          <van-image
            v-if="this.user.avatar == null || this.user.avatar === ''"
            class="avatar-image"
            round
            src="../../assets/images/defaultAvatar.png"
            cover
          />
          
          <br />
          <span class="username">{{ user.username }}</span>
        </div>

        <!-- 个人签名展示(待做，前期考虑不充足，model已经建立好，此时再更改压力有点大) -->
        <!-- <div class="user-sign">
                    <span>12</span>
                </div> -->

        <!-- 消息区 -->
        <div class="user-message">
          <van-grid clickable :column-num="3" :border="false">
            <van-grid-item text="点赞" :to="{name:'thumb'}" @click="readThumbMsg" :badge="this.thumbBadge">
              <template slot="icon">
                <i class="iconfont icon-dianzan iconMsg"></i>
              </template>
            </van-grid-item>
            <van-grid-item text="粉丝" @click="readAttentionMsg" :to="{name:'fansList'}" :badge="this.attentionBadge">
              <template slot="icon">
                <i class="iconfont icon-wodefensi iconMsg"></i>
              </template>
            </van-grid-item>

            <van-grid-item text="关注" :to="{name:'idolList'}">
              <template slot="icon">
                <i class="iconfont icon-wodeguanzhu iconMsg"></i>
              </template>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
      <!-- 用户信息展示区end -->

      <!-- 帮助与反馈start -->
      <van-cell-group class="cell-item">
        <van-cell title="帮助与反馈" is-link :border="false">
          <template #icon>
            <i class="iconfont icon-bangzhuyufankui"></i>
          </template>
        </van-cell>
      </van-cell-group>
      <!-- 帮助与反馈end -->

      <!-- 账号中心start -->
      <van-cell-group class="cell-item">
        <van-cell title="账号中心" is-link :border="false" :to="{name:'account'}">
          <template #icon>
            <i class="iconfont icon-zhanghaozhongxin"></i>
          </template>
        </van-cell>
      </van-cell-group>
      <!-- 账号中心end -->

      <!-- 关于我们start -->
      <van-cell-group class="cell-item">
        <van-cell title="关于我们" is-link :border="false">
          <template #icon>
            <i class="iconfont icon-guanyuwomen"></i>
          </template>
        </van-cell>
      </van-cell-group>
      <!-- 关于我们end -->

      <!-- 退出登录start -->
      <van-cell-group class="cell-item">
        <van-cell title="退出登录" is-link :border="false" @click="logout">
          <template #icon>
            <i class="iconfont icon-tuichudenglu"></i>
          </template>
        </van-cell>
      </van-cell-group>
      <!-- 退出登录end -->
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "User",

  data() {
    return {};
  },

  computed: {
    ...mapState("user", ["user"]),
    ...mapState("message",['Message']),
    thumbBadge(){ 
      let badge;
      if(this.Message.thumb_me < 99){ 
        badge = this.Message.thumb_me == 0 ? '' : this.Message.thumb_me
      } else { 
        badge = "99+"
      }

      return badge;
    },


    attentionBadge(){ 
      let badge;
      if(this.Message.payAttention_me < 99){ 
        badge = this.Message.payAttention_me == 0 ? '' : this.Message.payAttention_me
      } else { 
        badge = "99+"
      }

      return badge;
    }
  },

  mounted() {},

  methods: {
    /**
     * 向后端发送点赞消息已读的通知
     */
    readThumbMsg(){ 
      if(this.Message.thumb_me > 0){ 
          this.websocket.Send("点赞",this.user.username,"System","消息已读")
      }
        
    },

    /**
     * 向后端发送关注消息已读的通知
     */
    readAttentionMsg(){ 
      if(this.Message.payAttention_me > 0){ 
          this.websocket.Send("关注",this.user.username,"System","消息已读")
      }
    },


    logout(){ 
      this.$dialog.confirm({ 
        title:'提示',
        message:'你确定要退出吗？',
        closeOnPopstate:true
      })
      .then(() => { 
        window.localStorage.removeItem("result")
        this.websocket.forceClose();
        setTimeout(() => {
          this.$router.push("/login") 
        }, 310);
        
      })
      .catch(() => { 

      })

      
    }
  },
};
</script>

<style scoped>
.iconMsg {
  font-size: 33px !important;
}

.user-container {
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/images/userbg.jpg");
  background-size: contain;
  background-position: top;
  background-repeat: no-repeat;
  overflow: auto;
}

.user-body {
  width: 344px;
  height: auto;
  margin: 0 auto;
  margin-top: 104px;
}

.userInfo-wrap {
  position: relative;
  height: 160px;
  background-color: #fff;
}

.cell-item {
  margin: 10px 0;
}

.avatar-wrap {
  position: absolute;
  width: 71px;
  left: 0;
  right: 0;
  margin: auto;
  top: -35px;
  z-index: 999;
}

.avatar-wrap .username {
  display: block;
  width: inherit;
  color: #646566;
  font-size: 17px;
  font-family: "Adobe 宋体 Std L";
  text-align: center;
}

.avatar-image {
  width: 71px;
  height: 71px;
}

.user-message {
  position: relative;
  top: 70px;
}
</style>